<template>
	<!-- 发布 -->
	<view>
		<view class="solid"></view>
		<view class="type bg-white flex-cb" style="margin-bottom: 20rpx;">
			<view class="text">发布城市</view>
			<view class="flex-cb Price_type">
				<picker @change="PickerCity"  mode="region" class="Price" >
					<view :class="{price:city !== ''}">
						{{cdct?cdct:'请选择发布城市'}}
					</view>
				</picker>
				<text class="cuIcon-right"></text>
			</view>
		</view>
		<view class="type bg-white flex-cb">
			<view class="text">信息类型</view>
			<view class="flex-cb Price_type">
				<picker @change="PickerChange" :value="index" :range="type" class="Price" >
					<view :class="{price:index !== -1}">
						{{index>-1?type[index]:'请选择信息类型'}}
					</view>
				</picker>
				<text class="cuIcon-right"></text>
			</view>
		</view>
		<view class="title flex-cb bg-white">
			<text>标题名称</text>
			<input type="text" placeholder="请输入标题名称" @input="handleInput">
		</view>
		<view class="main_text bg-white">
			<view class="flex-cb">
				<text>内容</text>
				<text class="numbar200">{{textNumber}}/200</text>
			</view>
			<textarea name="" :value="text" maxlength="200" placeholder="请输入发布的详细内容" @input="handleInput2"></textarea>
		</view>
		<view class="image_div bg-white">
			<text>请上传照片（最多3张）</text>
			<view class="image_view flex-c" @click="changeImg" v-if="img.length <1">
				<image src="/static/index/icon_sczp.png" mode=""></image>
			</view>
			<scroll-view scroll-x="true" v-else class="flex">
				<view class=" "  v-for="(i,j) in img" :key="j" @click="handleitem(j)">
					<image :src="i" mode="aspectFit"></image>
				</view>
			</scroll-view>
			
			<view class="button flex-c" @click="submit">发布</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				city:'',
				district:'',
				cdct:'',//城区展示
				index:-1,
				typelist:[],
				type:[],
				title:'',
				text:'',
				textNumber:0,
				img:[],
				image:[]
			};
		},
		onLoad() {
			this.$api.types().then(res=>{
				this.typelist = res.data
				for (let i = 0; i < res.data.length; i++) {
					this.type[i] = res.data[i].name
				}
			})
		},
		methods:{
			PickerCity(e){
				this.city = e.detail.value[1]
				this.district = e.detail.value[2]
				this.cdct = this.city+this.district
			},
			PickerChange(e) {
				this.index = e.detail.value
			},
			handleInput(e){
				this.title = e.detail.value
			},
			handleInput2(e){
				this.text = e.detail.value
				this.textNumber = this.text.length
			},
			handleitem(j){
				this.img.splice(j,1)
			},
			changeImg(){
				uni.chooseImage({
					count: 3, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						this.img = res.tempFilePaths
						uni.showLoading({
							title: '正在上传',
							mask: true
						});
						for (let i = 0; i < this.img.length; i++) {
							this.$api.upImage(this.img[i]).then(Res => {
								if(Res){
									this.image[i] = Res
								}
							});
						}
						uni.hideLoading();
					}
				});
			},
			submit(){
				if(this.index == -1){
					this.$utils.tips('请选择信息分类')
					return
				}
				if(this.title == ''){
					this.$utils.tips('请输入标题名称')
					return
				}
				if(this.text == ''){
					this.$utils.tips('请输入内容详情')
					return
				}
				if(this.img.length == 0){
					this.$utils.tips('请上传照片')
					return
				}
				
				this.$api.city_information_release({
					type_id:this.typelist[this.index].id,
					city:this.city,
					district:this.district,
					title:this.title,
					content:this.text,
					images:this.image,
				},1).then(res=>{
					if(res.code == 200001){
						this.$utils.tips('发布成功,等待后台审核')
						setTimeout(()=>{
							uni.navigateBack({
								delta:1,
								animationDuration:500
							})
						},500)
					}
					if(res.code == 100403){
						uni.showModal({
							title:'提示',
							content:'您还不是会员，是否前往开通',
							success(res) {
								if(res.confirm){
									uni.navigateTo({
										url:'/pageC/mine/Function list/vip'
									})
								}
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.type,.title,.main_text{
	height: 100rpx;
	padding: 0 21rpx 0 16rpx;
	font-size: 30rpx;
	color: #333;
	.Price_type{
		color: #999999;
		.Price{
			height: 42rpx;
		}
		.price{
			color: #000;
		}
		.cuIcon-right{
			margin-left: 20rpx;
			font-size: 22rpx;
			
		}
	}
	
}
.title{
	margin: 20rpx 0;
	input{
		width: 210rpx;
		height: 42rpx;
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 70rpx;
	}
}
.main_text{
	height: auto;
	padding-top: 15rpx;
	padding-bottom: 20rpx;
	height: 307rpx;
	.numbar200{
		color: #999999;
	}
	textarea{
		margin-top: 21rpx;
		height: 100%;
		width: 100%;
	}
}
.image_div{
	margin-top: 20rpx;
	padding: 28rpx 34rpx;
	width: 750rpx;
	height: 637rpx;
	scroll-view{
		width: 100%;
		height: 216rpx;
		margin-top: 21rpx;
		overflow: hidden;
		view{
			display: inline-block;
			margin-right: 20rpx;
			image{
				width: 206rpx;height: 206rpx;
			}
		}
	}
	.image_view{
		margin-top: 21rpx;
		width: 216rpx;
		height: 216rpx;
		background: #F8F8F8;
		border-radius: 10rpx;
		image{
			width: 58rpx;
			height: 51rpx;
		}
	}
	.button{
		width: 630rpx;
		height: 88rpx;
		border-radius: 88rpx;
		background: #1CD699;
		box-shadow: 0px 2px 10px 1px rgba(42,64,92,0.14);
		color: #fff;
		font-size: 34rpx;
		margin: auto;
		margin-top: 179rpx;
	}
}
</style>
